<template>
  <div>
    <uv-navbar class=""  autoBack placeholder bgColor="#ffffff" title="取消订单" />
    <div class="p1756190002">
      <div class="pb30">
        <div class="p1756190057">请告诉我们取消原因</div>
        <div class="fz28 pt20" style="color: #898989">我们将努力改善，为您提供更好的服务</div>
      </div>
      <div class="fz36 p1756190977 pt30 pb30">自己原因</div>
      <div class="p1756191048">
        <uv-radio-group iconColor="#ffffff" iconSize="36rpx" size="36rpx" activeColor="#E60012" labelSize="30rpx"
          placement="column" v-model="radiovalue">
          <uv-radio :customStyle="{margin: '20rpx 0'}" v-for="(item, index) in ownReasonsList"
            :key="'ownReasonsList-' + index" :label="item.name" :name="item.id">
          </uv-radio>
        </uv-radio-group>
      </div>

      <div class="fz36 p1756190977 pt30 pb30">骑手原因</div>

      <div class="p1756191048">
        <uv-radio-group iconColor="#ffffff" iconSize="36rpx" size="36rpx" activeColor="#E60012" labelSize="30rpx"
          placement="column" v-model="radiovalue">
          <uv-radio :customStyle="{margin: '20rpx 0'}" v-for="(item, index) in riderReasonsList"
            :key="'riderReasonsList-' + index" :label="item.name" :name="item.id">
          </uv-radio>
        </uv-radio-group>
      </div>
      <div class="p1756192105 fac pt30 jcsb">
        <div class="p1756191291  fac jcc" style="border: 2rpx solid #C9CACA;" @click="backTap">暂不取消
        </div>
        <div class="p1756191456 fac jcc" style="flex: 0.95">
          <uv-button @click="cancelOrderTap" :disabled="radiovalue ? false : true" size="mini" text="取消订单">
            <div class="fz36 p1756193077" style="color: #fff;">取消订单</div>
          </uv-button>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import { getReasonCancellation } from '@/api/index.js'
  export default {
    data() {
      return {
        radiovalue: '',
        riderReasonsList: [],
        ownReasonsList: [],
        routeQuery: {}
      }
    },
    onReady(e) {
    },
    onLoad(options) {
      if (options) this.routeQuery = options
      uni.showLoading({ title: '加载中', mask: true })
      getReasonCancellation().then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this.ownReasonsList = res.result.own_reasons
          this.riderReasonsList = res.result.rider_reasons
        }
      })
    },
    methods: {
      backTap() {
        uni.navigateBack({ url: ('/pages-worker/order?id='+ this.routeQuery.id) });
      },
      cancelOrderTap() {
        uni.redirectTo({ url: ('/pages-worker/cancelOrderSubmit?id='+ this.routeQuery.id + '&rcd=' + this.radiovalue) });
      }
    }
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
@import './common.scss';
  .fz36 {
    font-size: 36rpx;
  }

  .p1756190002 {
    padding: 50rpx 30rpx 60rpx 30rpx;

    .p1756190057 {
      font-weight: 700;
      font-size: 46rpx;

    }
  }


  .p1756191048 {
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    background-color: #F7F8F8;

  }

  .p1756191291 {
    width: 230rpx;
    border-radius: 10rpx;
    height: 90rpx;
    max-height: 90rpx;
    line-height: 90rpx;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
  }

  .p1756192105 {
    margin-top: 40rpx;

  }

  .p1756191456 {
    border-radius: 10rpx;
    height: 94rpx;
    max-height: 94rpx;
    line-height: 94rpx;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
    color: #fff;
  }

 
  .uv-button.uv-button--mini {
    .p1756193077 {
      width: inherit !important;
      height: inherit !important;
      background-color: #E60012;
    }
  }

  .uv-button.uv-button--mini.uv-button--disabled {
    .p1756193077 {
      background-color: #C9CACA !important;
      color: #fff;
      border: 2rpx solid #C9CACA !important;
    }
  }
</style>